<script setup lang="ts">
  import { useForm } from '@/hooks/arco/useForm';
  import {
    createBranch,
    editInstBranch,
    queryInstBranchInfo,
  } from '@/api/organization/nursing-home';
  import region from '@/assets/region.json';
  import useDetailDrawerBinder from '@/hooks/arco/useDetailDrawerBinder';

  const addressOptions = region;

  const form = useForm({
    state: {
      branchId: '',
      name: '',
      shortName: '',
      status: '',
      address: '',
      provinceCode: '',
      cityCode: '',
      districtCode: '',
      addressCode: [] as string[],
    },
    rules: {
      name: [
        {
          required: true,
          message: '请输入院区名称',
        },
      ],
      shortName: [
        {
          required: true,
          message: '请输入院区简称',
        },
      ],
      status: [
        {
          required: true,
          message: '请输入院区状态',
        },
      ],
      address: [
        {
          required: true,
          message: '请输入院区详细地址',
        },
      ],
      addressCode: {
        required: true,
        message: '请选择省市区',
        length: 3,
      },
    },
  });

  const drawer = useDetailDrawerBinder({
    renderTitle(mode) {
      if (mode === 'add') {
        return '新建院区';
      }
      return '编辑院区';
    },
    onShow(mode, otherParams) {
      if (mode === 'edit') {
        return queryInstBranchInfo(otherParams.id).then((res) => {
          form.setFieldsValue(res);
          form.state.addressCode = [
            res.provinceCode,
            res.cityCode,
            res.districtCode,
          ];
        });
      }
      form.backToInit();
      return Promise.resolve();
    },
    async onOkClick(mode) {
      await form.validate();

      if (mode === 'add') {
        return createBranch(form.state);
      }
      return editInstBranch(form.state);
    },
  });

  const onAddressCodeChange = (path: any) => {
    const [p, c, d] = path as string[];
    form.state.provinceCode = p;
    form.state.cityCode = c;
    form.state.districtCode = d;
  };

  defineExpose(drawer.expose);
</script>

<template>
  <detail-drawer position="right" width="400px" v-bind="drawer.bindProps">
    <a-form v-bind="form.bindProps" layout="vertical">
      <a-row id="branch-detail">
        <a-col :span="24">
          <a-form-item field="name" label="院区名称">
            <a-input v-model="form.state.name" placeholder="请输入院区名称" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item field="shortName" label="院区简称">
            <a-input
              v-model="form.state.shortName"
              placeholder="请输入院区简称"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item field="status" label="院区状态">
            <dict-select
              v-model="form.state.status"
              type="InstitutionBranchStatus"
              placeholder="请选择院区状态"
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="addressCode" label="所在地区">
            <a-cascader
              v-model="form.state.addressCode"
              :options="addressOptions"
              placeholder="请选择院区所在地区"
              path-mode
              popup-container="#branch-detail"
              @change="onAddressCodeChange"
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="address" label="详细地址">
            <a-input
              v-model="form.state.address"
              placeholder="请输入院区详细地址"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </detail-drawer>
</template>

<style lang="less" scoped></style>
